<template>
     <a-drawer
      :width="1000"
      title="园区详情"
      placement="right"
      :visible="visible"
      @close="visible=false">
      <a-card title="园区信息" style="margin-bottom:24px">
        <detail-list :col="2">
          <detail-list-item term="园区服务公司名称">{{detail.name}}</detail-list-item>
          <detail-list-item term="统一信用代码">{{detail.creditCode}}</detail-list-item>
          <detail-list-item term="纳税人性质">{{detail.taxNature===1?'一般':'小规模'}}</detail-list-item>
          <detail-list-item term="法人姓名">{{detail.legalPersonName}}</detail-list-item>
          <detail-list-item term="法人电话">{{detail.legalPersonPhone}}</detail-list-item>
          <detail-list-item term="园区负责人（商务）姓名">{{detail.contact}}</detail-list-item>
          <detail-list-item term="园区负责人（商务）电话">{{detail.contactPhone}}</detail-list-item>
        </detail-list>
        <detail-list :col="1">
          <detail-list-item term="单位注册地址">{{detail.address}}</detail-list-item>
        </detail-list>
        <detail-list :col="2">
          <detail-list-item term="营业执照">
            <viewer :images = "[detail.businessLicense]">
              <img :src="detail.businessLicense" style="width: 80px;height:80px;">
            </viewer>
          </detail-list-item>
          <detail-list-item term="法人身份证正反面">
            <viewer :images = "[detail.legalPersonIdCardFront,detail.legalPersonIdCardBackend]">
               <img :src="detail.legalPersonIdCardFront" style="width: 80px;height:80px;margin-right:4px;">
              <img :src="detail.legalPersonIdCardBackend" style="width: 80px;height:80px;">
            </viewer>
           
          </detail-list-item>
        </detail-list>
      </a-card>
      <a-card title="开户信息">
        <div v-for="(item,index) in paymentsList" :key="index" class="open-account-info">
          <p class="account-ams">
            <span class="account-label">账户名称：</span>
            <span class="account-val">{{item.accountName}}</span>
          </p>
          <p class="account-ams">
            <span class="account-label">开户行：</span>
            <span class="account-val">{{item.bankName?item.bankName:'--'}}</span>
          </p>
          <p class="account-ams">
             <span class="account-label">{{item.payChannel === 1?'招商银行账号：':item.payChannel === 3 ? '支付宝到卡：':'支付宝账户：'}}</span>
            <span class="account-val">{{item.accountNo}}</span>
          </p>
          <img v-if="item.payChannel === 1" class="seo-img" src="~@/assets/seo.png">
          <img v-if="item.payChannel === 2" class="sox-img" src="~@/assets/sox.png">
          <img v-if="item.payChannel === 3" class="plipay-img" src="~@/assets/plipay.jpg">
        </div>
      </a-card>
        
      </a-drawer>
</template>

<script>
import { 
  getEnterpriseOrParkDetail
} from '@/api/manage/enterprise'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'ParkDetail',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      visible:false,
      detail:{
        name:'',
        contact:'',
        contactPhone:'',
        taxNature:'',
        address:'',
        creditCode:'',
        legalPersonName:'',
        legalPersonPhone:'',
        businessLicense:'',
        legalPersonIdCardFront:'',
        legalPersonIdCardBackend:''
      },
      paymentsList:[],
    }
  },
  methods: {
    async add(item){
      const {code,data} = await getEnterpriseOrParkDetail(item.parkId);
      if(code === '1'){
        Object.assign(this.detail,data);
        this.paymentsList = data.payments;
        this.visible = true;
      }
    }
  }
}
</script>
<style lang="less">
  .seo-img{
    position: absolute;
    top: -3px;
    right: 7px;
    width: 128px;
  }
  .sox-img{
    position: absolute;
    top: -44px;
    right: 10px;
    width: 128px;
  }
  .plipay-img{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 128px;
  }
  .open-account-info{
    position: relative;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
     .account-ams {
        padding: 8px 0;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
     .account-label {
        color: rgba(0, 0, 0, 0.6);
        white-space: nowrap;
        width: 125px;
        text-align: right;
    }
    .account-val {
    color: #000;
}
  }
</style>